<template>
  <el-dialog
    :title="multiple?(smsType==1?'供应商短信提醒批量设置':'消费者短信提醒批量设置'):dataList[0]?dataList[0].sms_title:''"
    :visible.sync="dialogVisible"
    width="800px"
  >
    <div style="max-height:400px;overflow:auto;">
      <div
        class="flex flex-between-center sms_item"
        v-for="item in dataList"
        :key="item.id"
      >
        <div
          class="left"
          style="min-width:220px;"
        >
          <p
            class="bold-font"
            style="margin-bottom:20px"
          >{{item.sms_title}}</p>
          <div class="form_item">
            <label>功能开关：</label>
            <p class="flex-1">
              <el-radio
                v-model="item.is_open"
                :label="1"
              >开启</el-radio>
              <el-radio
                v-model="item.is_open"
                :label="0"
              >关闭</el-radio>
            </p>
          </div>
          <div class="form_item">
            <label>触发条件：</label>
            <p class="flex-1">{{item.trigger_rule}}</p>
          </div>
          <div class="form_item">
            <label>收费规则：</label>
            <p class="flex-1">{{item.charge_rule}}<br /><span class="color-999">（一个中心占两个字符）</span></p>
          </div>
          <div
            v-if="item.sms_type==1"
            class="form_item"
            style="margin-top:3px"
          >
            <label>接收手机：</label>
            <div class="flex-1">
              <el-input
                maxlength="11"
                class="send_mobile"
                clearable
                @input="val=>changeNumberInput(item)"
                v-model="item.send_mobile"
                placeholder="请输入接收手机号"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="right">
          <p class="header">短信模板样式</p>
          <p
            class="font-12"
            style="padding:15px;line-height:23px"
          >{{item.sms_content}}</p>
        </div>
      </div>
    </div>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="dialogVisible = false"
      >取 消</el-button>
      <el-button
        size="small"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { singleSmsInfo, batchSmsInfo, setSingleSms, setBatchSms } from "@/api/marketing";
export default {
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    selectId: {
      type: String
    },
    smsType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialogVisible: false,
      dataList: []
    }
  },
  methods: {
    changeNumberInput(item) {
      const pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式
      // 不符合正整数时
      if (!pattern.test(item.send_mobile)) {
        // input 框绑定的内容为空
        item.send_mobile = ''
      }
    },
    submit() {
      if (this.multiple) {
        const list = [];
        for (let item of this.dataList) {
          const { id, is_open, send_mobile } = item;
          let obj = {
            sms_template_id: id,
            status: is_open,
            send_mobile
          }
          list.push(obj);
        }
        const jsonStr = JSON.stringify(list);
        setBatchSms({ list: jsonStr }).then(res => {
          this.dialogVisible = false;
          this.$emit('getList');
        })
      } else {
        const { id, send_mobile, is_open } = this.dataList[0];
        setSingleSms({
          sms_template_id: id,
          status: is_open,
          send_mobile
        }).then(res => {
          this.dialogVisible = false;
          this.$emit('getList');
        })
      }
    },
    getData() {
      if (this.multiple) {
        // 批量
        batchSmsInfo(this.smsType).then(res => {
          this.dataList = res.sms_template || [];
          if (this.smsType == 2) {
            for (let item of this.dataList) {
              item.send_mobile = '';
            }
          }
        })
      } else {
        // 获取单个信息
        singleSmsInfo(this.selectId).then(res => {
          if (res.sms_type == 2) {
            res.send_mobile = ''
          }
          this.dataList = [{ ...res }];
        })
      }
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getData();
      } else {
        this.dataList = [];
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sms_item {
  padding: 20px;
  border: 1px solid #e6e6e6;
  margin-bottom: 20px;
}
.form_item {
  display: flex;
  label,
  p,
  span {
    font-size: 12px;
    line-height: 23px;
  }
}
.right {
  margin-left: 20px;
  background-color: #f5f5f5;
  .header {
    padding: 10px 15px;
    border-bottom: 1px solid #e6e6e6;
  }
}
.send_mobile {
  /deep/.el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  /deep/.el-input__icon {
    line-height: 30px;
  }
}
</style>
